<template>
	<view>
		<view class="page-head">
			<view class="search flex-box plr30">
				<image class="mr15" src="../../static/icon/icon_search1.png" mode="aspectFit"></image>
				<input class="input flex-1" type="text" placeholder="搜索话题内容" placeholder-class="col-c" />
			</view>
		</view>
		<view class="container">
			<view class="topic-list pt30">
				<navigator class="item flex-box mb30" :url="'/pages/release/release?topic_id=' + item.id + '&name=' + item.name" v-for="item in topicList">
					<image class="mr20 img" :src="item.image" mode="aspectFill"></image>
					<view class="flex-1">
						<view class="title mb40" v-cloak>{{ item.name }}</view>
						<view class="fs24 col-9">{{ item.forumuser_count }}参与 {{ item.forum_count }}动态</view>
					</view>
				</navigator>
			</view>
			<navigator class="icon-gotop" open-type="navigateBack" url="/pages/release/release" hover-class="none"><image src="/static/icon/icon_btn_add.png" mode="aspectFit"></image></navigator>
		</view>
	</view>
</template>

<script>
const core = require('../../xiluedu/core.js');
const util = require('../../xiluedu/util.js');
export default {
	data() {
		return {
			pageNum: 1, // 分页记录数
			pageSize: 8, // 分页大小
			total: 0, //分页总数
			isGetAll: true, // 是否加载完
			topicList: []
		};
	},
	onLoad() {
		this.getTopicList();
	},
	onReachBottom() {
		if (!this.isGetAll) {
			this.getTopicList();
		}
	},
	onPullDownRefresh() {
		this.topicList = [];
		this.total = 0;
		this.pageNum = 1;
		this.getTopicList();
	},
	methods: {
		getTopicList() {
			let page = this.pageNum,
				pagesize = this.pageSize;
			let data = {
				page,
				pagesize
			};
			core.get({
				url: 'xiluedu.topic/lists',
				data,
				success: ret => {
					if (ret.code == 1) {
						this.topicList = this.topicList.concat(ret.data.data);
						console.log(this.topicList);
						this.total = ret.data.total;
						this.pageNum = this.pageNum + 1;
						if (page * pagesize >= ret.data.total) {
							this.isGetAll = true;
						} else {
							this.isGetAll = false;
						}
					}
				}
			});
		}
	}
};
</script>

<style scoped>
.page-head {
	padding: 40rpx 30rpx 0;
	background-color: #fff;
}
.page-head .search {
	width: 100%;
	height: 70rpx;
	background: #f8f8f8;
	border-radius: 35rpx;
}
.page-head .search image {
	display: block;
	width: 28rpx;
	height: 28rpx;
}
.page-head .input {
	font-size: 26rpx;
	font-weight: 500;
	color: #333;
}
.container {
	padding: 110rpx 25rpx 0;
}

.topic-list .img {
	display: block;
	width: 122rpx;
	height: 122rpx;
	border-radius: 10rpx;
}
.topic-list .title {
	position: relative;
}
/* .topic-list .title::before {
	content: '#';
}
.topic-list .title::after {
	content: '#';
} */
.icon-gotop {
	position: fixed;
	right: 30rpx;
	bottom: 110rpx;
	z-index: 5;
	display: block;
	width: 96rpx;
	height: 96rpx;
	border-radius: 50%;
}
.icon-gotop image {
	display: block;
	width: 96rpx;
	height: 96rpx;
}
</style>
